<template>
  <div class="designer-container">
    <div class="box-tools">
      <tool-menu @clickMenuItem="handleToolMenuItem"></tool-menu>
      <div class="tools-btn">
        <ul>
          <li @click="saveChartsInfo">
            <el-tooltip
              class="item"
              effect="dark"
              content="保存"
              placement="bottom"
            >
              <i class="el-icon-upload"></i>
            </el-tooltip>
          </li>
          <li @click="fullScreen">
            <el-tooltip
              class="item"
              effect="dark"
              content="全屏"
              placement="bottom"
            >
              <i class="el-icon-full-screen"></i>
            </el-tooltip>
          </li>
          <li @click="showPreview">
            <el-tooltip
              class="item"
              effect="dark"
              content="预览"
              placement="bottom"
            >
              <i class="el-icon-view"></i>
            </el-tooltip>
          </li>
        </ul>
      </div>
    </div>
    <div class="box-content">
      <div class="box-layer" @click.self="refreshWidgetActive">
        <div class="title">图层</div>
        <div class="layer">
          <ul>
            <li
              v-for="layer in layers"
              :key="layer.id"
              :class="layer.active ? 'layer-active' : ''"
              @click="refreshWidgetActive(layer.id)"
              @contextmenu.prevent="
                showContextMenu($event, layer.index, layer.id)
              "
            >
              <span class="layer-icon">
                <i :class="layer.icon" />
              </span>
              <el-tooltip
                class="item"
                effect="dark"
                :content="layer.name"
                placement="right"
              >
                <span class="layer-text">{{ layer.name }}</span>
              </el-tooltip>
            </li>
          </ul>
        </div>
      </div>
      <div class="canvas">
        <designer-ruler
          :width="screen.width"
          :height="screen.height"
        ></designer-ruler>
        <div
          class="screen-content"
          :style="screenStyle"
          @click.self="refreshWidgetActive"
        >
          <widget
            ref="widget"
            v-for="(widget, index) in widgets"
            :widget="widget"
            :key="widget.id"
            :index="index"
            @refreshWidgetActive="refreshWidgetActive"
            @contextmenu.prevent.native="showContextMenu($event, index)"
          ></widget>
        </div>
      </div>
      <div class="box-property">
        <widget-prop v-if="widgetProp" :widget="widgetProp"></widget-prop>
        <el-tabs v-else value="0">
          <el-tab-pane label="属性" name="0">
            <el-form label-width="80px" size="mini">
              <el-form-item label="大屏名称">
                <el-input v-model="screen.name" clearable></el-input>
              </el-form-item>
              <el-form-item label="大屏宽度">
                <el-input-number
                  controls-position="right"
                  v-model="screen.width"
                ></el-input-number>
              </el-form-item>
              <el-form-item label="大屏高度">
                <el-input-number
                  controls-position="right"
                  v-model="screen.height"
                ></el-input-number>
              </el-form-item>
              <el-form-item label="大屏简介">
                <el-input type="textarea" v-model="screen.remark"></el-input>
              </el-form-item>
              <el-form-item label="背景颜色">
                <el-col :span="19">
                  <el-input v-model="screen.color"></el-input>
                </el-col>
                <el-col :span="5">
                  <el-color-picker v-model="screen.color"></el-color-picker>
                </el-col>
              </el-form-item>
              <el-form-item label="背景图片">
                <el-col :span="19">
                  <el-input v-model="screen.image"></el-input>
                </el-col>
                <el-col :span="5">
                  <image-upload @uploadSuccess="uploadSuccess"></image-upload>
                </el-col>
              </el-form-item>
            </el-form>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
    <context-menu :context="context" @handleContextMenu="handleContextMenu" />
  </div>
</template>

<script>
import Widget from "./widget";
import WidgetProp from "./prop";
import ToolMenu from "./part/Menu.vue";
import DesignerRuler from "./part/Ruler.vue";
import ContextMenu from "./part/Context.vue";
import ImageUpload from "./part/ImageUpload.vue";
import {
  initScreenInfo,
  getScreenStyle,
  changeArrayItemIndex,
} from "./tools/DesignUtils";
import { initWidgetInfo } from "./tools/WidgetUtils";
import { obtainScreenInfo, saveScreenInfo } from "@/api";
import _ from "lodash";
export default {
  data() {
    return {
      screen: {},
      widgets: [],
      context: {
        show: false,
        index: 0,
        style: {
          top: 0,
          left: 0,
        },
      },
    };
  },
  computed: {
    screenStyle() {
      return getScreenStyle(this.screen);
    },
    layers() {
      let layers = [];
      for (let i = 0; i < this.widgets.length; i++) {
        let widget = this.widgets[i];
        layers.push({
          id: widget.id,
          index: i,
          active: widget.active,
          name: widget.layer.name,
          icon: widget.layer.icon,
        });
      }
      return layers.reverse();
    },
    widgetProp() {
      for (let i = 0; i < this.widgets.length; i++) {
        if (this.widgets[i].active) {
          return this.widgets[i];
        }
      }
      return undefined;
    },
  },
  mounted() {
    this.setupScreenInfo();
  },
  methods: {
    setupScreenInfo() {
      const screenId = this.$route.params.id;
      obtainScreenInfo(screenId).then((response) => {
        if (response.data) {
          this.widgets = JSON.parse(response.data.widgets);
          delete response.data.widgets;
          delete response.data.enable;
          delete response.data.createTime;
          delete response.data.updateTime;
          this.screen = response.data;
        } else {
          this.screen = initScreenInfo(screenId);
        }
      });
    },
    saveChartsInfo() {
      if (!this.screen.name) {
        this.$message({
          showClose: true,
          message: "大屏名称不能为空",
          type: "warning",
        });
        return;
      }
      if (!this.screen.width) {
        this.$message({
          showClose: true,
          message: "大屏宽度不能为空",
          type: "warning",
        });
        return;
      }
      if (!this.screen.height) {
        this.$message({
          showClose: true,
          message: "大屏高度不能为空",
          type: "warning",
        });
        return;
      }
      let form = _.cloneDeep(this.screen);
      form.widgets = JSON.stringify(this.widgets);
      saveScreenInfo(form).then(() => {
        this.$message({
          showClose: true,
          message: "保存成功",
          type: "success",
        });
      });
    },
    handleToolMenuItem(key) {
      let widget = initWidgetInfo(key);
      if (widget !== null) {
        this.widgets.push(widget);
      }
    },
    showContextMenu(event, index, widgetId) {
      if (widgetId) {
        this.refreshWidgetActive(widgetId);
      }
      this.context.index = index;
      this.context.style.top = event.clientY;
      this.context.style.left = event.clientX;
      this.context.show = true;
    },
    handleContextMenu({ type, index }) {
      if (type === 0) {
        // 删除图层
        this.$confirm("是否确认删除该图层？", "提示", {
          type: "warning",
          customClass: "box-confirm",
          closeOnClickModal: false,
          closeOnPressEscape: false,
        })
          .then(() => {
            this.widgets.splice(index, 1);
          })
          .catch(() => {});
      } else if (type === 1) {
        // 置顶图层
        changeArrayItemIndex(this.widgets, index, this.widgets.length);
      } else if (type === 2) {
        // 上移一层
        changeArrayItemIndex(this.widgets, index, index + 1);
      } else if (type === 3) {
        // 下移一层
        changeArrayItemIndex(this.widgets, index, index - 1);
      } else if (type === 4) {
        // 置底图层
        changeArrayItemIndex(this.widgets, index, 0);
      }
      this.context.show = false;
    },
    keyDownEscapeHandleFullScreen(event) {
      if (event.key === "Escape") {
        let classList = document.getElementsByClassName("canvas")[0].classList;
        if (classList.contains("fullscreen")) {
          classList.remove("fullscreen");
          document.removeEventListener(
            "keydown",
            this.keyDownEscapeHandleFullScreen
          );
        }
      }
    },
    fullScreen() {
      let canvas = document.getElementsByClassName("canvas")[0];
      if (!canvas.classList.contains("fullscreen")) {
        canvas.classList.add("fullscreen");
        document.addEventListener(
          "keydown",
          this.keyDownEscapeHandleFullScreen
        );
      }
    },
    showPreview() {
      let router = this.$router.resolve({
        name: "views",
        params: {
          id: this.screen.id,
        },
      });
      window.open(router.href, "_blank");
    },
    refreshWidgetActive(id) {
      this.widgets.forEach((widget) => {
        widget.active = widget.id === id;
      });
      this.context.show = false;
    },
    uploadSuccess(imageUrl) {
      this.screen.image = imageUrl;
    },
  },
  components: {
    Widget,
    WidgetProp,
    DesignerRuler,
    ToolMenu,
    ContextMenu,
    ImageUpload,
  },
};
</script>

<style lang="stylus">
@import '~@/assets/iconfont/iconfont.css';
@import '~@/assets/stylus/designer.styl';

.designer-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-flow: column nowrap;

  .box-tools {
    width: 100%;
    height: 45px;
    position: relative;

    .tools-btn {
      height: 100%;
      position: absolute;
      top: 0;
      right: 5px;
      z-index: 10000;
      box-sizing: border-box;

      ul {
        height: 100%;
        list-style: none;
        line-height: 45px;

        li {
          width: 35px;
          height: 30px;
          cursor: pointer;
          margin-right: 10px;
          line-height: 30px;
          text-align: center;
          display: inline-block;
          color: #ffffff;
          background-color: #303538;
        }
      }
    }
  }

  .box-content {
    height: calc(100% - 45px);
    display: flex;

    .box-layer {
      width: 180px;
      display: flex;
      flex-flow: column;
      background-color: #212121;

      .title {
        height: 35px;
        line-height: 35px;
        text-align: center;
        color: #ffffff;
        font-size: 14px;
        background-color: #2b2f2b;
      }

      .layer {
        grid-row: 1;
        overflow-x: hidden;
        overflow-y: auto;
        margin-top: 10px;
        cursor: pointer;
        line-height: 50px;
        padding-bottom: 10px;

        &::-webkit-scrollbar {
          width: 6px;
        }

        &::-webkit-scrollbar-thumb {
          background: hsla(0, 0%, 100%, 0.2);
          border-radius: 5px;
          background-color: #0e0b0a;
        }

        ul {
          li {
            &:hover {
              background-color: #2b2f2b;
            }

            .layer-icon {
              width: 50px;
              height: 30px;
              text-align: center;
              line-height: 30px;
              margin-left: 15px;
              color: #5aa5f3;
              display: inline-block;
              border: 1px solid #525d6e;
              background: #2b2f2c;
            }

            .layer-text {
              width: 90px;
              display: inline-block;
              margin-left: 10px;
              font-size: 12px;
              color: #ffffff;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
              vertical-align: top;
            }
          }

          .layer-active {
            background-color: #73aae5;

            &:hover {
              background-color: #73aae5;
            }
          }
        }
      }
    }

    .canvas {
      width: calc(100% - 500px);
      overflow: auto;
      padding: 15px;
      position: relative;
      box-sizing: border-box;
      background-color: #2a2e33;

      &::-webkit-scrollbar {
        width: 0;
        height: 8px;
      }

      &::-webkit-scrollbar-thumb {
        background: hsla(0, 0%, 100%, 0.2);
        border-radius: 5px;
        background-color: #0e0b0a;
      }

      .screen-content {
        position: relative;
        display: inline-block;
        overflow: hidden;
      }
    }

    .box-property {
      width: 320px;
      background-color: #212121;
    }
  }
}
</style>
